<template>
  <div class="DB-radar-container">
    <el-card class="app-container" id="radarEchart"></el-card>
  </div>
</template>

<script>
export default {
  name: 'DB-radar',
  data() {
    return {}
  },
  mounted() {
    this.getLoadEcharts()
  },
  methods: {
    getLoadEcharts() {
      var myChart = this.$echarts.init(document.getElementById('radarEchart'))
      const option = {
        title: {
          text: '绩效指数',
        },
        color: ['#ee3f4d'],
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '考勤', max: 100 },
            { name: '技术', max: 100 },
            { name: '管理', max: 100 },
            { name: '分享', max: 100 },
            { name: '卫生', max: 100 },
            { name: '助人', max: 100 },
          ],
          axisName: {
            formatter: '【{value}】',
            color: '#461629',
          },
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [100, 60, 50, 35, 50, 99],
                name: 'Allocated Budget',
              },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.app-container {
  height: 235px;
  margin-top: 10px;
}
</style>
